<template>
  <div class="pop-container">
    <div ref="popRef" :style="{width: popWidth + 'px'}" :class="{'maxHeight7': !isFull}" class="container">
      <div class="top">
        <!-- <h3>{{ title }}</h3> -->
        <div>
          <!-- <i v-if="fullScreenIcon" class="el-icon-full-screen el-icon-tools" @click="isFullScreen" /> -->
          <i class="el-icon-close el-icon-tools" @click="closePop" />
        </div>
      </div>
      <div class="title-box">
        <h1>{{title}}</h1>
      </div>
      <div :class="{'maxHeight5': !isFull}" class="main-container">
        <slot />
        <div v-if="btnShow" class="btn-content">
          <el-button size="small" @click="closePop">{{ closeBtn }}</el-button>
          <el-button size="small" type="primary" @click="submitPop">{{ submitBtn }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'popContent',
  props: {
    title: {
      type: String,
      default: ''
    },
    fullScreenIcon: { // 是否显示按钮
      type: Boolean,
      default: false
    },
    btnShow: { // 是否显示按钮
      type: Boolean,
      default: true
    },
    closeBtn: { // 关闭按钮-文字
      type: String,
      default: '取消'
    },
    submitBtn: { // 确定按钮-文字
      type: String,
      default: '确定'
    },
    popWidth: { // 弹出层宽度
      type: Number,
      default: 400
    }
  },
  data() {
    return {
      isFull: false
    }
  },
  created() {
    const that = this
    window.onresize = function () {
      if (!checkFull()) {
        // 要执行的动作
        that.isFull = false
      }
    }
    function checkFull() {
      var isFull =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement
      // to fix : false || undefined == undefined
      if (isFull === undefined) isFull = false
      return isFull
    }
  },
  methods: {
    closePop() {
      this.$emit('closePop')
    },
    submitPop() {
      this.$emit('submitPop')
    },
    isFullScreen() {
      if (!this.isFull) {
        this.$refs.popRef.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
      this.isFull = !this.isFull
    }
  }
}
</script>
<style lang="less" scoped>
.title-box {
  display: flex;
  justify-content: center;
}
@primarycolor: #17caaa;
.pop-container {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  overflow: auto;
  z-index: 2000;
  .container {
    background-color: #ffffff;
    border-radius: 4px;
    overflow: auto;
    .top {
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      // border-bottom: 1px solid #eeeff1;
      h3 {
        font-size: 14px;
        color: #283550;
        padding-left: 20px;
        position: relative;
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          width: 6px;
          height: 100%;
          display: block;
          content: "";
          background: #17caaa;
        }
      }
      .el-icon-tools {
        color: #afafaf;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        margin-right: 16px;
      }
    }
    .main-container {
      padding: 15px 20px;
      overflow: auto;
      .btn-content {
        float: right;
        margin-top: 15px;
      }
    }
  }
}
.maxHeight7 {
  max-height: 700px;
}
.maxHeight5 {
  max-height: 500px;
}
</style>

